//这里是设定具体class的
//引入变量 -- 分开操作是为了能缩减变量的大小，使在具体的css样式里面能更好用变量来设置
@import "./variables";

* {
    //实首先要设置盒模型为样式优先：即放大页面页面也会跟着缩放而不是可以左右滑动的
    box-sizing: border-box;
    //去除高亮
    outline: none;
}

;

//整体风格设定
html {
    //设定整体字体大小（默认16）：决定了rem的大小-rem是响应式布局，根据屏幕比例不同字体大小也会改变，所以rem紧跟字体大小的变化
    //vw和vh css3规定所有屏幕高为100vh/宽为100vw
    //rpx 微信小程序规定所有屏幕为750rpx(iphone6的宽为基准为750rpx)，高根据宽的比例来确定
    font-size: 13px;
}

;

body {
    //默认body有边距，去除边距
    margin: 0;
    //字体设定，Arial几乎所有设置都有 |Helvetica苹果设备有 |sans-serif非衬线字体，对应黑体
    font-family: Arial, Helvetica, sans-serif;
    //行高
    line-height: 1.2em;
    //设定网页背景
    background: #f1f1f1;
    //设定字体平滑（适用于高分辨率设备）
    -webkit-flow-smoothing: antialiased;
}

;

a {
    //a标签字体颜色设定
    color: #999;
}

;

@each $col,
$cols in $colors {
    .bg-#{$col} {
        background-color: $cols;
    }
}

;

@each $col,
$cols in $colors {
    .text-#{$col} {
        color: $cols
    }
}

;




//文字对齐方式预处理
//用@each把三种情况都遍历出来了——遍历用于生成多个结果，减少代码量
//得到的结果是text-left/center/right{对应对齐程度}都生成了 然后需要字体居中的时直接写上对应的对齐方式即可
@each $var in (left, center, right) {
    .text-#{$var} {
        //强制应用，优先级最高
        text-align: $var !important;
    }

    ;
}

;



//把字号遍历出来形成可选项   有两个选项，所以遍历参数要有两个
@each $sizekey,
$size in $font-sizes {
    .fs-#{$sizekey} {
        //这样就可以实现根据基础字体大小改动所有字体大小
        font-size: $size*$base-font-size
    }
}

;

//flex布局设定    
.d-flex {
    display: flex;
}

;

//flex对齐方式 --简便化设置


@each $jckey,
$jc in $flex-jc {

    //形成一个个class类
    //jc-xx：主轴对齐方式 
    .jc-#{$jckey} {
        justify-content: $jc;
    }
}

;



@each $aikey,
$ai in $flex-ai {

    //注意模板字符串的写法在{}里面还要加$
    .ai-#{$aikey} {
        align-items: $ai;
    }
}

;

//改变flex主轴方向为上到下
.flex-column {
    flex-direction: column;
}

//使用flex-grow等分剩余空间
.flex-1 {
    flex-grow: 1;
}

;

.flex-warp {
    flex-wrap: wrap;
}



//实现方法：多重@each
@each $typekey,
$type in $spacing-types {

    //不带方位的样式 ：ep:m-o/p-3[四周设定]
    //不需要direciton的值
    @each $sizekey,
    $size in $spacing-sizes {
        .#{$typekey}-#{$sizekey} {
            #{$type}: $size
        }
    }

    //水平方向的样式：ep:m-x[x表示x轴]-1:水平方向的margin边距
    @each $sizekey,
    $size in $spacing-sizes {
        .#{$typekey}-x-#{$sizekey} {
            #{$type}-left: $size;
            #{$type}-right: $size;
        }
    }

    //垂直方向的样式：ep:m-y[y表示y轴]-1:垂直方向的margin边距为一级
    @each $sizekey,
    $size in $spacing-sizes {
        .#{$typekey}-y-#{$sizekey} {
            #{$type}-top: $size;
            #{$type}-bottom: $size;
        }
    }

    //把三种参数混合形成样式：ep：m-t-1:外边框的顶部是1级(0.25rem)高度
    // 再遍历direction
    @each $dirkey,
    $dir in $sapcing-directions {

        //最后遍历size
        @each $sizekey,
        $size in $spacing-sizes {

            //写内容，直接写
            .#{$typekey}-#{$dirkey}-#{$sizekey} {
                #{$type}-#{$dir}: $size
            }
        }
    }
}

@each $var in (right, left, inherit) {
    .float-#{$var} {
        float: $var;
    }
}

//btn 按钮样式
.btn {
    border: none;
    border-radius: .1538rem
        /* 2px -> .1538rem */
    ;
    //map-get:表示从之前定义好的属性里面获取 
    font-size: map-get($font-sizes, 'sm');
    padding: map-get($spacing-sizes, 1);
}

//nav的active激活样式，给下标--用嵌套的写法
.nav {
    .nav-item {
        //下边框为透明（transparent）颜色的
        border-bottom: .2308rem solid transparent;
        padding-bottom: 0.2rem;

        //.nav-item 和 .active属于同一级，所以要加 & 符号表示同一级
        &.active {
            border-bottom: .2308rem solid #fff;
        }
    }

    //为什么要给item加上透明边框？=>>保证active和item标签的样式相同仅仅是颜色不同，因为active是后面定义的所以会把item样式给覆盖
}

//宽度/高度分级
.w-100 {
    width: 100%;
}

;

.w-50 {
    width: 50%;
}

;

.h-100 {
    height: 100%;
}

;

.h-50 {
    height: 50%;
}

.sprite {
    //url:图片地址[注意要以实际显示的位置为相对路径，所有不适合在这里写url] | 0 0 ：左上角[以左上角为坐标原点开始] |no-repeat:不重复堆叠
    background: url(../index.png) no-repeat 0 0;
    background-size: 28.8462rem
        /* 375px -> 28.8462rem */
    ;
    display: inline-block; //只有加上inline-block 才可以设置i标签的高宽

    &.sprite-news {
        width: 1.7692rem
            /* 23px -> 1.7692rem */
        ;
        height: 1.5385rem
            /* 20px -> 1.5385rem */
        ;
        background-position: 63.546% 15.517% !important;

    }
}

.nav {

    //通常资讯导航栏样式
    .allways-item {
        border-bottom: .1538rem
            /* 2px -> .1538rem */
            solid transparent;
        padding-bottom: map-get($spacing-sizes, 1);

        &.active {

            border-bottom: .1538rem
                /* 2px -> .1538rem */
                solid map-get($map: $colors, $key: primary);
            color: map-get($map: $colors, $key: primary);
        }
    }
}

.w-s {
    display: inline-block;
    white-space: nowrap;
}

//对文本溢出的处理
.text-ellipsis {
    //先允许修改宽高
    display: inline-block;
    //溢出处理：hidden表示对溢出的元素进行隐藏处理
    overflow: hidden;
    //文字溢出处理:ellipsis表示用省略号处理溢出文字
    text-overflow: ellipsis;
    //这一项表示不允许进行换行
    white-space: nowrap;
}

//字重
@each $var,
$i in $font-weight {
    .fsw-#{$var} {
        font-weight: $i;
    }
}